<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('集中器列表')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
<div class="ui-layout-west">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-grid"></i> 集中器
			</div>
			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
				<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
				<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i class="fa fa-refresh"></i></button>
			</div>
		</div>
		<div class="ui-layout-content">
			<div id="tree" class="ztree"></div>
		</div>
	</div>
</div>

<div class="ui-layout-center">
		<div class="tabs-container">
			<ul class="nav nav-tabs">
				<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 热表数据</a>
				</li>
				<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">阀门数据</a>
				</li>
			</ul>
			<div class="tab-content">
				<div id="tab-1" class="tab-pane active">
					<div class="col-sm-12 select-table table-striped">
						<table id="bootstrap-table"></table>
					</div>
				</div>
				<div id="tab-2" class="tab-pane">
					<div class="col-sm-12 select-table table-striped">
						<table id="bootstrap-table1"></table>
					</div>
				</div>
			</div>
	</div>
</div>



<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script th:inline="javascript">

	var datas = [[${@dict.getType('equipment_status')}]];

	$(function() {
		var panehHidden = false;
		if ($(this).width() < 769) {
			panehHidden = true;
		}
		$('body').layout({ initClosed: panehHidden, west__size: 200 });
		queryConcentratorTree();
		queryCalorimeterData(0);
		queryValveData(0);
	});
	function queryCalorimeterData(concentratorId) {
		var url = ctx + "module/calorimeter/data/list"
		if(concentratorId != 0){
			url = url + "?concentratorId="+concentratorId;
		}

		$.table.destroy("bootstrap-table");

		var options = {
			url: url,
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			columns: [
				{
					field: 'calorimeterId',
					title: '热表ID',
					formatter: function(value, row, index) {
						return '<a href="javascript:void(0)" onclick="detailCalorimeter(\'' + row.calorimeterId + '\')">' + value + '</a>';
					}
				},
				{
					field: 'calorimeterType.typeName',
					title: '热表型号'
				},
				{
					field: 'concentratorId',
					title: '采集器'
				},
				{
					field: 'installTime',
					title: '安装时间'
				},
				{
					field: 'installAddress',
					title: '安装地址'
				},
				{
					field: 'installUser',
					title: '安装人'
				},
				{
					field: 'factory.factoryName',
					title: '厂商名称'
				},
				{
					field: 'factory.factoryCode',
					title: '厂商代码'
				},
				{
					field: 'status',
					title: '设备状态',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(datas, value);
					}
				}]
		};
		$.table.init(options);
	}

	function queryValveData(concentratorId) {
		var url = ctx + "module/valve/data/list"
		if(concentratorId != 0){
			url = url + "?concentratorId="+concentratorId;
		}

		$.table.destroy("bootstrap-table1");

		var options = {
			id: 'bootstrap-table1',
			url: url,
			showSearch: false,
			showRefresh: false,
			showToggle: false,
			showColumns: false,
			columns: [
				{
					field: 'valveId',
					title: '阀门ID',
					formatter: function(value, row, index) {
						return '<a href="javascript:void(0)" onclick="detailValve(\'' + row.valveId + '\')">' + value + '</a>';
					}
				},
				{
					field: 'valveType.typeName',
					title: '阀门型号'
				},
				{
					field: 'concentratorId',
					title: '采集器'
				},
				{
					field: 'installTime',
					title: '安装时间'
				},
				{
					field: 'installAddress',
					title: '安装地址'
				},
				{
					field: 'installUser',
					title: '安装人'
				},
				{
					field: 'factory.factoryName',
					title: '厂商名称'
				},
				{
					field: 'factory.factoryCode',
					title: '厂商代码'
				},
				{
					field: 'status',
					title: '设备状态',
					formatter: function(value, row, index) {
						return $.table.selectDictLabel(datas, value);
					}
				},
				{
					field: 'aperture',
					title: '阀门开度'
				}]
		};
		$.table.init(options);
	}

	function queryConcentratorTree()
	{
		var url = ctx + "module/concentrator/data/treeData";
		var options = {
			url: url,
			expandLevel: 2,
			onClick : zOnClick
		};
		$.tree.init(options);

		function zOnClick(event, treeId, treeNode) {
			queryCalorimeterData(treeNode.name);
			queryValveData(treeNode.name);
		}
	}

	$('#btnExpand').click(function() {
		$._tree.expandAll(true);
		$(this).hide();
		$('#btnCollapse').show();
	});

	$('#btnCollapse').click(function() {
		$._tree.expandAll(false);
		$(this).hide();
		$('#btnExpand').show();
	});

	$('#btnRefresh').click(function() {
		queryConcentratorTree();
	});

	/* 数据展示 */
	function detailCalorimeter(calorimeterId) {
		var url = ctx + 'module/calorimeter/record/' + calorimeterId;
		$.modal.openTab("热表数据", url);
	}

	/* 阀门数据 */
	function detailValve(valveId) {
		var url = ctx + 'module/valve/record/' + valveId;
		$.modal.openTab("阀门数据", url);
	}
</script>
</body>
</html>